<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <swiper :options="swiperOption">
            <swiper-slide v-for="item of slideList" :key="item.rotationId" >
              <img :src="item.rotationUrl" width="1000px" height="600px"/>
            </swiper-slide>
          </swiper>
          <div class="binner-btn-container">
            <div class="binner-btn-box">
              <div class="swiper-button swiper-button-next"></div>
              <div class="swiper-button swiper-button-prev"></div>
            </div>
          </div>
          <!--          <h2 class="brand-info__text">renren-fast-vue</h2>-->
          <!--          <p class="brand-info__intro">renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。</p>-->
          <!--&lt;!&ndash;          <button @click="saveLogininfo">点击获取数据</button>&ndash;&gt;-->
        </div>
        <div class="login-main">
          <h3 class="login-title">管理员注册
            <a  style="text-align: right" @click="$router.replace({ name: 'login' })">登陆</a>
          </h3>

          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input v-model="dataForm.email" type="text" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="请输入邮箱验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
<!--                  <img :src="captchaPath" @click="getCaptcha()" alt="">-->
<!--                  <el-button :class="{'active':activeStatus}" @click="activeStatus=!activeStatus" type="primary">发送</el-button>-->
                  <el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from '@/utils'
export default {
  props: ["slideList"],
  data () {
    return {
      getCode:'获取验证码',
      isGeting:false,
      count:6,
      disable:false,

      activeStatus:true,
      slideList:{},
      swiperOption: {
        autoplay: true,
        observer: true,
        observeParents: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      dataForm: {
        userName: '',
        password: '',
        email:'',
        captcha: '',
        captchaPath:''
      },
      dataRule: {
        userName: [
          { required: true, message: '帐号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      captchaPath: ''
    }
  },
  // active(){
  //   this.activeStatus=true;
  //
  //   setTimeout(()=>{this.activeStatus=false},200)
  //
  // },
  created () {
    this.saveLogininfo();
    this.getSideList();
  },
  methods: {
    getVerifyCode() {
      var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false;
          this.disable = false;
          this.getCode = '获取验证码';
          this.count = 6;
          clearInterval(countDown);
        } else {
          this.isGeting = true;
          this.disable = true;
          this.getCode = this.count-- + 's后重发';
        }
      }, 1000);
      // this.$refs['dataForm'].validate((valid) => {
      if (this.dataForm.email) {
        this.$http({
          url: this.$http.adornUrl('/sys/register/sendEmail'),
          method: 'post',
          params: this.$http.adornParams({
            'email': this.dataForm.email
          })
        }).then(({data}) => {
          if (data){
            this.dataForm.captchaPath=data
          }
          // if (data && data.code === 0) {
          //   this.$cookie.set('token', data.token)
          //   this.$router.replace({name: 'home'})
          // } else {
          //   this.getCaptcha()
          //   this.$message.error(data.msg)
          // }
        })
        // }

      }
    },
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/register/user'),
            method: 'post',
            data: this.$http.adornData({
              'username': this.dataForm.userName,
              'password': this.dataForm.password,
              'captcha': this.dataForm.captcha,
              'captchaPath': this.dataForm.captchaPath,
              'email':this.dataForm.email
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              // this.$cookie.set('token', data.token)
              this.$message.success("注册成功！")
              this.$router.replace({ name: 'login' })
            } else {
              // this.getCaptcha()
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    saveLogininfo () {
      // this.$http.adornUrl('/generator/syslogininfor/saveLogininfo')
      this.$http({
        url: this.$http.adornUrl('/generator/syslogininfor/saveLogininfo'),
        method: 'get',
      });
    },
    getSideList () {
      // 获取数据列表
      this.$http({
        url: this.$http.adornUrl('/generator/webrotation/getSideList'),
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.slideList = data.sideList
        } else {
          this.slideList = null;

        }

      })
    }

  },


}
</script>

<style lang="scss">
.codeGeting{
  background: #cdcdcd;
  border-color: #cdcdcd;
}
//.active{
//  background-color: #EF3800;
//
//  color: #ebeef5;
//
//}
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, .6);
  overflow: hidden;
  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/login_bg.jpg);
    background-size: cover;
  }
  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }
  //.brand-info {
  //  margin: 220px 100px 0 90px;
  //  color: #fff;
  //}
  //.brand-info__text {
  //  margin:  0 0 22px 0;
  //  font-size: 48px;
  //  font-weight: 400;
  //  text-transform : uppercase;
  //}
  //.brand-info__intro {
  //  margin: 10px 0;
  //  font-size: 16px;
  //  line-height: 1.58;
  //  opacity: .6;
  //}
  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
    }
  }
  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }
}

//轮播图样式
.brand-info  {
  position: relative;
  max-width: 1620px;
  max-height: 800px;
  overflow: hidden;
  margin: auto;
  text-align: center;
  //img {
  //  width: 70%;
  //}
}
.binner-btn-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  z-index: 999;
  width: 100%;
  max-width: 1140px;
  transform: translateX(-50%);
}
.binner-btn-box {
  width: 100px;
  position: relative;
  margin: auto;
  right: 5%;
  .swiper-button {
    background-image: url("~@/assets/img/binnerBtn.png");
    width: 34px;
    height: 34px;
    padding: 10px;
    background-size: cover;
    outline: none !important;
    &.swiper-button-next {
      transform: rotateZ(180deg);
    }
  }
}
//.text-box {
//  position: absolute;
//  top: 50%;
//  left: 50%;
//  z-index: 999;
//  width: 100%;
//  max-width: 1140px;
//  transform: translate(-50%, -50%);
//  color: #fff;
//  cursor: default;
//  .text-b {
//    font-size: 50px;
//    margin-bottom: 20px;
//  }
//}
@media (max-width: 768px) {
  .text-b {
    font-size: 30px !important;
    margin-bottom: 20px;
  }
}
</style>

